<template>
  <div class="server-list">
    <leave-crud title="服务器" :url="url" :searchOption="searchOption" :selectOperation="['export']">
      <template slot="tableRows">
        <el-table-column prop="name" label="服务器名称">
          <template slot-scope="props">
            <router-link :to="`/server/${props.row._id}`">
              {{ props.row.name }}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column prop="host" label="服务器地址"></el-table-column>
        <el-table-column prop="user.name" label="创建用户"></el-table-column>
        <el-table-column
          prop="module"
          label="加载模块"
          min-width="120px"
          :filters="[
            { text: 'CPU', value: 'CPU' },
            { text: 'Memory', value: 'Memory' },
            { text: 'LAN', value: 'LAN' },
            { text: 'Disk', value: 'Disk' },
            { text: 'Nginx', value: 'Nginx' },
          ]"
          :filter-method="filterModule">
          <template slot-scope="props">
            <el-tag v-for="mode in props.row.module" type="info" size="mini" :key="mode">
              {{ mode }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="upType" label="采集方式" min-width="110px">
          <template slot-scope="props">
            <el-button v-if="props.row.upType === 0" size="mini" type="primary" @click="viewData(props.row)">
              {{ upTypeDict[props.row.upType] }}
            </el-button>
            <el-tag v-else size="mini" type="info">
              {{ upTypeDict[props.row.upType] || '无' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column sortable="custom" prop="rate" label="上报速率（秒）" min-width="110px">
          <template slot-scope="props">
            {{ props.row.rate || '非主动' }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="110px"></el-table-column>
        <el-table-column sortable="custom" prop="createdAt" label="创建时间" min-width="120px">
          <template slot-scope="props">
            {{ props.row.createdAt | date }}
          </template>
        </el-table-column>
      </template>
    </leave-crud>

    <el-dialog title="最新数据" :visible.sync="dataVisible" width="70%">
      <div v-html="$jsonFormat(record)" class="json-box"></div>
      <template slot="footer">
        <div class="oper-area">
          <el-button type="success" @click="dataVisible = false">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>


<script>
  import axios from 'axios'

  export default {
    name: 'server-list',
    data() {
      return {
        loading: false,
        dataVisible: false,
        url: '/server',
        searchOption: [
          { key: 'name', label: '服务器名称' },
          { key: 'host', label: '服务器地址' },
        ],
        record: {},
        upTypeDict: {
          0: 'HTTP Server',
          1: 'WebHook',
          2: 'TCP',
          3: 'UDP',
        },
      }
    },
    methods: {
      // 模块过滤
      filterModule(value, row) {
        return row.module.includes(value)
      },
      viewData(row) {
        axios.get(`http://${row.host}:7070/data`, { params: { client_id: row._id, token: row.token } })
             .then((response) => {
               this.dataVisible = true
               this.loading = true
               this.record = response.data
               this.loading = false
             }).catch(() => {
          this.$message.error('获取失败')
          this.loading = false
        })
      },
    },
    created() {},
  }
</script>


<style lang="scss">
  .server-list {
    .el-button--mini {
      padding: 2px;
    }
  }
</style>
